<template>
	<view>
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form :model="model1" :rules="rules" ref="uForm" labelWidth="200rpx">
			<u-form-item required label="会议时间" prop="date" borderBottom ref="item1">
				<picker mode="date" @change="dateChange" class="w100">
					<view class="f28 c000 tRight" v-if="model1.date">{{model1.date}}</view>
					<view class="f28 c999 tRight" v-else>请选择会议时间</view>
				</picker>
				<template #right>
					<u-icon name="arrow-right"></u-icon>
				</template>
			</u-form-item>
			<u-form-item required label="会议内容" prop="sex" borderBottom ref="item1">
				<u--input v-model="model1.sex" inputAlign="right" placeholder="请输入会议内容" border="none"></u--input>
			</u-form-item>
			<u-form-item required label="会议人员" prop="user" borderBottom ref="item1" labelPosition="top">
				<div class="fWrap w100">
					<u-checkbox-group v-model="model1.user">
						<u-checkbox shape="circle" name="1" label="同事1" class="mr20"></u-checkbox>
						<u-checkbox shape="circle" name="2" label="同事2" class="mr20"></u-checkbox>
						<u-checkbox shape="circle" name="3" label="同事3" class="mr20"></u-checkbox>
						<u-checkbox shape="circle" name="4" label="同事4" class="mr20"></u-checkbox>
					</u-checkbox-group>
				</div>

			</u-form-item>
		</u--form>
		<div class="posf w100">
			<u-button type="primary" @click="submit">发起会议</u-button>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showSex: false,
				model1: {
					date: '',
					sex: '',
					user: ''
				},
				rules: {
					'date': {
						type: 'string',
						required: true,
						message: '请填写时间',
						trigger: ['blur', 'change']
					},
					'sex': {
						type: 'string',
						required: true,
						message: '请输入会议内容',
						trigger: ['blur', 'change']
					},
					'user': {
						type: 'any',
						required: true,
						message: '请输入会议人员',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false
			};
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('发起成功')
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			dateChange(e) {
				this.model1.date = e.detail.value
			},
		},
	};
</script>
<style>
	.posf {
		bottom: 60rpx;
		left: 0;
		padding: 0 30rpx;
	}

	:deep(.u-form-item) {
		background-color: #fff;
		padding: 20rpx 40rpx;
	}
</style>